<template>
  <div class="dashboard-container">
    <!-- 头部内容 -->
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="all" />
        <el-tab-pane label="我发起的" name="me" />
        <el-tab-pane label="待审批" name="wait" />
      </el-tabs>
      <div class="approvals">
        <el-row type="flex">
          <el-col :span="2"><strong class="title" style="margin-right: 10px;">审批类型:</strong></el-col>
          <el-col>
            <el-radio-group v-model="approvalsTypes" style="margin:5px 0">
              <el-radio
                v-for="item in approvalsType"
                :key="item.deploymentId"
                :label="item.key"
                :value="item.key"
                @change="changeSelectParams"
              >{{ item.name }}</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row v-show="activeName ==='all' || activeName ==='me'" type="flex">
          <el-col :span="2"> <strong class="title" style="margin-right: 10px;">审批状态:</strong></el-col>
          <el-col>
            <el-checkbox-group v-model="approvalsStates">
              <el-checkbox
                v-for="item in approvalsState"
                :key="item.id"
                :label="item.id"
                :value="item.id"
                @change="changeSelectParams"
              >{{ item.value }}</el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-row>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            width="55"
            label="序号"
          >
            <template slot-scope="scope">
              {{ ((page.page - 1) * page.pageSize) + (scope.$index + 1) }}
            </template></el-table-column>
          <el-table-column
            label="审批类型"
            width="120"
            prop="processName"
          />
          <el-table-column
            v-if="activeName !=='me'"
            label="申请人"
            prop="username"
          />
          <el-table-column
            v-if="activeName !=='wait'"
            label="当前审批人"
            prop="procCurrNodeUserName"
          />

          <el-table-column
            label="申请日期"
            width="120"
          >
            <template slot-scope="{row}">
              {{ row.procApplyTime | formatDate }}
            </template>
          </el-table-column>
          <el-table-column
            prop="processState"
            label="审批状态"
          >
            <template slot-scope="{row}">
              <span v-if="row.processState==='1'" class="rovalsState">
                审批中
              </span>
              <span v-if="row.processState==='2'" class="rovalsState">
                审批通过
              </span>
              <span v-if="row.processState==='3'" class="rovalsState">
                审批不通过
              </span>
              <span v-if="row.processState==='4'" class="rovalsState">
                撤销
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{row}">
              <el-button
                v-if="row.processState==='1' && activeName==='me'"
                size="mini"
                type="primary"
                @click="clickPass('4',row.processId)"
              >撤销</el-button>
              <el-button
                v-if="row.processState==='1' && activeName!=='me'"
                size="mini"
                type="primary"
                :disabled="showPass(row)"
                @click="clickPass('2',row.processId)"
              >通过</el-button>

              <el-button
                v-if="row.processState==='1' && activeName!=='me'"
                size="mini"
                type="primary"
                :disabled="showPass(row)"
                @click="clickPass('3',row.processId)"
              >驳回</el-button>
              <el-button
                size="mini"
                type="primary"
                @click="handleLook(row.processId)"
              >查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="page.page"
          :page-sizes="[5, 10, 15,20]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

    </el-card>
    <lookApprovals :show-dialog.sync="showDialog" :rule-form="ruleForm" />
    <!-- 通过审核 -->
    <el-dialog
      title="通过审核"
      :visible.sync="adoptVisible"
      width="30%"
    >
      <span><el-input v-model="formData.handleOpinion" type="textarea" /></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="adoptVisible = false">取消</el-button>
        <el-button type="primary" @click="handleProcess">确认</el-button>
      </span>
    </el-dialog>
    <!-- end -->
  </div>
</template>

<script>
// import Approvals from './components/approvals'
import { getApprovalList, approvalsPass, getFlowList } from '@/api/approvals'
import baseApi from '@/api/constant/approvals'
import lookApprovals from './components/lookApprovals'
import { mapGetters } from 'vuex'
export default {
  components: {
    lookApprovals
  },
  data() {
    return {
      adoptVisible: false,
      activeName: 'all',
      radio: '',
      checkList: [],
      tableData: [],
      approvalsType: [],
      approvalsTypes: '',
      approvalsState: baseApi.approvalState,
      approvalsStates: [],
      newTableData: [],
      multipleSelection: [],
      page: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      showDialog: false,
      ruleForm: {
        data: {
          processName: ''
        }
      },
      formData: {
        handleOpinion: '',
        processId: '',
        handleType: ''
      }
    }
  },
  computed: {
    ...mapGetters(['userId'])

  },
  created() {
    this.getApprovalList()
    this.getFlowList()
  },
  methods: {
    showPass(row) {
      return row.userId === this.userId && row.procCurrNodeUserName.indexOf(row.username) === -1
    },
    // tabs切换
    handleClick(tab, event) {
      this.activeName = tab.name
      console.log(this.activeName)
      this.approvalsStates = []
      this.page.processState = ''

      // let sendData = {};
      if (this.activeName === 'me') {
        delete this.page.userId
        delete this.page.procCurrNodeUserId
        this.page.userId = this.userId
      } else if (this.activeName === 'wait') {
        delete this.page.userId
        delete this.page.procCurrNodeUserId
        this.page.procCurrNodeUserId = this.userId
        this.page.processState = '1'
      } else if (this.activeName === 'all') {
        delete this.page.userId
        delete this.page.procCurrNodeUserId
      }
      this.page.page = 1
      this.getApprovalList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    clickPass(num, id) {
      this.adoptVisible = true
      this.formData.processId = id
      if (num === '2') {
        // 通过
        this.formData.handleType = '2'
      } else if (num === '3') {
        // 驳回
        this.formData.handleType = '3'
      } else if (num === '4') {
        this.formData.handleType = '4'
      }
      this.formData.handleUserId = this.userId
    },
    // 确认发起请求
    async handleProcess() {
      await approvalsPass(this.formData)
      this.$message.success('操作成功')
      this.getApprovalList()
      this.formData = {
        handleOpinion: '',
        processId: '',
        handleType: ''
      }
      this.adoptVisible = false
    },
    // 单选/复选
    changeSelectParams() {
      this.page.processKey = this.approvalsTypes
      this.page.processState = this.approvalsStates.join(',')
      this.getApprovalList()
    },
    // 查看
    handleLook(id) {
      const newArray = this.tableData.filter(item => item.processId === id)
      this.ruleForm = newArray[0]
      this.ruleForm.data = JSON.parse(this.ruleForm.procData)
      // console.log(this.ruleForm.data)
      this.showDialog = true
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getApprovalList()
      // if (this.page.page === 1) {
      // }
      // console.log(`每页 ${val} 条`)
    },
    // 当前页
    handleCurrentChange(val) {
      this.page.page = val
      this.getApprovalList()
      console.log(`当前页: ${val}`)
    },
    // 列表数据
    async getApprovalList() {
      const { rows, total } = await getApprovalList(this.page)
      this.page.total = total
      this.tableData = rows
      console.log(this.tableData)
    },
    // 审批类型
    async getFlowList() {
      this.approvalsType = await getFlowList()
      console.log(this.approvalsType)
    }
  }
}
</script>

<style lang="scss" scoped>

.dashboard-container {
  margin: 10px;

}
.el-row{
  line-height: 40px;
}
.el-pagination{
  text-align: center;
  margin-top: 10px;
}
</style>
